<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="@/assets/icons/jckj.svg" alt="#" />
      <h2 v-show="!isFold" class="title">{{ title }}</h2>
    </div>
    <div class="nav">
      <el-menu
        :default-active="defaultActive"
        :collapse="isFold"
        text-color="#b7bdc3"
        active-text-color="#fff"
        background-color="#001529"
      >
        <!-- 1、遍历整个菜单 -->
        <template v-for="item in userMenus" :key="item._id">
          <el-sub-menu :index="item._id">
            <template #title>
              <el-icon>
                <component :is="item.icon?.split('el-icon-')[1]"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <!-- 2、遍历子菜单 -->
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item
                :index="subItem._id"
                @click="handleItemClick(subItem)"
              >
                <template #title>
                  <el-icon>
                    <component
                      :is="subItem.icon?.split('el-icon-')[1]"
                    ></component>
                  </el-icon>
                  <span>{{ subItem.name }} </span>
                </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import useLoginStore from '@/store/login'
import emitter from '@/emitter'
import { router_change } from '@/emitter'
import { pathMapToMenu } from '@/utils'

defineOptions({
  // 组件名称
  name: 'MainMenu',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

// 父组件传递过来的属性
defineProps({
  isFold: {
    type: Boolean,
    default: false
  }
})

// 路由
const route = useRoute()
const title = '巨创科技操控管理平台'
const loginStore = useLoginStore()
const userMenus = loginStore.userMenus

// 定义默认激活的菜单
const defaultActive = computed(() => {
  // 获取当前路由对应的菜单
  const pathMenu = pathMapToMenu(route.path, userMenus)
  return pathMenu?._id
})

// 点击菜单事件
const handleItemClick = (item: any) => {
  const url = item.url
  emitter.emit(router_change, url)
}
</script>

<style scoped lang="scss">
.nav-menu {
  height: 100%;
  background-color: #001529;
}
.logo {
  display: flex;
  height: 50px;
  background-color: #0c2135;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  .img {
    height: 100%;
  }
  .title {
    color: #fff;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }
}
.el-menu {
  border-right: none;
  user-select: none;
  .el-sub-menu {
    .el-menu-item {
      padding-left: 40px !important;
      background-color: #0c2135;
      &:hover {
        color: #fff;
      }
      &.is-active {
        background-color: #0a60bd;
      }
    }
  }
}
</style>
